<template>
	<view class="wrapper">
		<view class="logo">
			<image src="../../static/user/logo.png" alt="" mode="aspectFit">
		</view>
		<view class="title">登录</view>
		<view class="subtitle">账号密码登录</view>
		<view class="form">
			<view class="input-wrapper">
				<view class="left">账号</view>
				<view class="right">
					<input type="text" placeholder="请输入账号" placeholder-class="inputclass" v-model="mobile">
				</view>
			</view>
			<view class="input-wrapper">
				<view class="left">密码</view>
				<view class="right">
					<input type="safe-password" placeholder="请输入密码" placeholder-class="inputclass" v-model="password">
				</view>
			</view>
		</view>
		<view class="agree">
			<uni-icons type="checkbox" size="16"></uni-icons>
			<view class="agreeinfo">我已阅读并同意<text>《用户协议》</text>后方可登录</view>
		</view>
		<view class="button">
			<view class="login-btn" @tap="getUserInfo('/pages/index/index')">登录</view>
			<view class="register-btn" @tap="jumpNavigateTo('/pages/user/register')">去注册 <uni-icons type="arrow-right"
					size="15" color="#08377D"></uni-icons></view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				title: 'Hello',
				mobile: '',
				password: '',
			}
		},
		onLoad() {

		},
		methods: {
			getUserInfo(url) {
				if (this.mobile == '') {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none'
					})
				} else if (this.password == '') {
					uni.showToast({
						title: '密码不能为空',
						icon: 'none'
					})
				} else {
					var data = {
						mobile: this.mobile,
						password: this.password,

					}
					this.$rqt.login(data).then(res => {
					   console.log(res)
							if (res.code == 0) {
								 uni.setStorageSync('token', res.data.token);
								uni.showToast({
								    title: '登录成功',
								    icon: 'success',
								    duration: 2000,
								    complete: function() {
								        setTimeout(function() {
								           uni.switchTab({
								           	url: url
								           })
								        }, 2000);
								    }
								});
								
						
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
					})
					
					
				}

			},

			jumpNavigateTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			jumpSwitchTab(url) {

			},
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}

	.wrapper {
		height: 100%;
		padding: 1rpx 33rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
		background-color: #f7f6fb;
	}

	.logo {
		width: 141rpx;
		height: 175rpx;
		margin: 87rpx auto 46rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.title {
		text-align: center;
		font-size: 48rpx;
		font-weight: bold;
		margin-bottom: 100rpx;
	}

	.subtitle {
		text-align: center;
		font-size: 35rpx;
		font-weight: 600;
		position: relative;
		margin-bottom: 60rpx;
	}

	.subtitle::after {
		content: '';
		position: absolute;
		top: 50rpx;
		left: 50%;
		margin-left: -75rpx;
		z-index: 0;
		width: 150rpx;
		height: 10rpx;
		border-radius: 5rpx;
		background: #0d3578;
	}

	.form {
		.input-wrapper {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			background-color: #fff;
			display: flex;
			justify-content: flex-start;
			border-radius: 20rpx;
			margin: 20rpx auto;
			font-size: 28rpx;

			.left {
				width: 180rpx;
				text-align: center;
			}

			.right input {
				height: 100rpx;
				line-height: 100rpx;
			}

			.inputclass {
				font-size: 28rpx;
			}
		}
	}

	.agree {
		display: flex;
		justify-content: flex-start;
		font-size: 24rpx;
		margin: 40rpx auto 40rpx;

		.agreeinfo {
			margin-left: 10rpx;

			text {
				color: #08377D;
			}
		}
	}

	.button {
		.login-btn {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			color: #fff;
			background: linear-gradient(to right, #004EC2, #08377D);
			border-radius: 20rpx;
		}

		.register-btn {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			color: #08377D;
		}
	}
</style>